<template>
<!--  <UniVideo ref="dialogueVideoRef" :autoPlay="false" height="1080" :muted="false" :loop="false" @countPlay="countPlay"-->
<!--            video-url="https://appletfujiunicom.oss-cn-shenzhen.aliyuncs.com/attach/2024/06/video/japan-long-video/a.m3u8"/>-->
    <div class="loading-human fade-element" v-show="isLoadingHuman">
      <div class="logo-block">
        <img class="logo" :src="logo" alt="" />
      </div>
      <video class="loading-video" loop autoplay>
        <source src="https://appletfujiunicom.oss-cn-shenzhen.aliyuncs.com/attach/2024/07/video/loading-human.webm" type="video/webm">
        Your browser does not support the video tag.
      </video>
      <div class="loading-text">
        正在载入中，请稍后...
      </div>
    </div>
    <div class="dialogue fade-element" :class="bgType === 'init' ? 'init-bg':'video-bg'" v-show="!isLoadingHuman">
      <div class="logo-block">
        <img class="logo" :src="logo" alt="" />
      </div>
      <div class="video-desc" v-show="faceType === 'notFace' && bgType === 'videoBg'">
        <!--      poster="https://appletfujiunicom.oss-cn-shenzhen.aliyuncs.com/attach/2023/07/public/home-poster.jpg "-->
        <UniVideo ref="dialogueVideoRef" :autoPlay="false" :muted="true" height="1800" :intoVideoType="intoVideoType"
                  :loop="false" @countPlay="countPlay" @talkFive="talkFive" @talkFour="talkFour" @talkThree="talkThree" @talkOne="talkOne" @talkTwo="talkTwo" @playEnded="playEnded" @againPlay="playEnded"
                  video-url="https://appletfujiunicom.oss-cn-shenzhen.aliyuncs.com/attach/2024/07/video/publicize-video/a.m3u8"/>
<!--        https://appletfujiunicom.oss-cn-shenzhen.aliyuncs.com/attach/2024/06/video/japan-long-video/a.m3u8-->
      </div>
      <!--     v-show="faceType === 'face'"-->
      <div class="voice-block" v-show="faceType === 'face'">
        <div class="voice-children">
          <!--        <img class="example-img" :src="example" alt="" v-if="!isHasCamera"/>-->
          <!--        <UserCamera @getCamera="getCamera" v-else/>-->
          <UserCamera ref="cameraRef" @getCamera="getCamera" @getAvatar="getAvatar"/>
        </div>
        <img class="voice-icon" :src="voiceIcon" alt="" />
      </div>
      <div class="chat-message-block" :class="faceType === 'face' ? '' : 'container-pos-top'" v-show="bgType === 'init'">
        <div class="chat-block" ref="chatBlockRef">
        </div>
        <div class="user-text-block flex-center fade-element" v-if="isSpeak === false && faceType === 'face'">
          <div class="left">
            <img class="bubble" :src="bubbleImg" alt="" />
            <img class="interior-img" :src="bubbleImgLoading" alt="" />
          </div>
          <div class="avatar-img">
            <el-image class="img-url" :src="avatar ? avatar : avatarImg" fit="cover" />
          </div>
        </div>
        <div class="user-text-block flex-center fade-element" v-if="isSpeak && faceType === 'face'">
          <div class="left">
            <img class="bubble" :src="bubbleImg" alt="" />
            <img class="interior-img" :src="userMsgImg" alt="" />
          </div>
          <div class="avatar-img">
            <el-image class="img-url" :src="avatar ? avatar : avatarImg" fit="cover" />
          </div>
        </div>
      </div>
      <div class="container" :class="[containerClass]"></div>
      <TipsModal v-model:show="isShowTips" :message="tipsMessage" :showFooter="true" :isShowCancelBtn="false" confirmText="确定" @confirm="confirmInit" type="error" />
    </div>
</template>
<script setup>
import { ref, provide, inject, onMounted, onBeforeUnmount, computed } from "vue"
import DUIX from "duix-guiji"
import ApiPublic from "@/api/public.js";
import UserCamera from "@/components/user-camera/index.vue"
import TipsModal from "@/components/tips-modal.vue";
import UniVideo from "@/components/uni-video.vue";

import logo from "@/assets/images/dialogue/logo.svg"
import example from "@/assets/images/dialogue/image-example.png"
import voiceIcon from "@/assets/images/dialogue/voice-icon.svg"
import avatarImg from "@/assets/images/dialogue/avatar-ex.png"
import bubbleImg from "@/assets/images/dialogue/bubble.png"
import bubbleImgLoading from "@/assets/images/dialogue/loading-voice.webp"
import bubbleInteriorImg from "@/assets/images/dialogue/bubble-inster.png"
import userMsgImg from "@/assets/images/dialogue/user-msg.webp"


let isLoadingHuman = ref(true)
// let isLoadingHuman = ref(false)
let searchValue = ref("")
let tipsMessage = ref("")
let avatar = ref("")
let isKeyWordType = ref(false)
let speakCount = ref(0) // AI说话计数
let isSpeak = ref(null)
let isHasCamera = ref(false)
let isShowTips = ref(false)
let faceType = ref("face")
let bgType = ref("init")
// let faceType = ref("notFace")
// let bgType = ref("videoBg")
let intoVideoType = ref("")
let countPlays = ref(0)
let dialogueVideoRef = ref(null)
let cameraRef = ref(null)
let notSpeakTime = ref(null)
let delayCheckTimer = ref(null)
let isKeyWord = ref(false)
let speakOne = ref(false)
let speakTwo = ref(false)
let speakThree = ref(false)
let speakFour = ref(false)
let speakFive = ref(false)
const duix = new DUIX()
const chatBlockRef = ref(null)


onMounted(async () => {
  speakCount.value = 0
  countPlays.value = 0
  // window.addEventListener("beforeunload", function (event) {
  if (duix.isInit) {
    duix.stop()
    speakCount.value = 0
  }
  // })
  // 初始化 VConsole 并挂载到 window 上
  // startSpeech()
  // getDuxiToken()
  const constraints = {
    video: true, // 不请求摄像头
    audio: true // 请求麦克风
  }
  stream.value = await navigator.mediaDevices.getUserMedia(constraints)
  // initDuix()
})

onBeforeUnmount(() => {
  if (duix) {
    duix.stop()
  }
})

// 修改样式
const containerClass = computed(() => {
  if (faceType.value === "face") {
    return "container-pos-70"
  } else {
    if(bgType.value === 'init') {
      return "container-pos-center"
    } else {
      return "container-pos-right"
    }
  }
})

const playEnded = () => {
  initSpeak()
}

const talkOne = () => {
  duix.setVideoMuted(false)
  if(!speakOne.value) {
    speakOne.value = true
    // duix.speak({ content: '世界に一つだけのオーダーメイドアパレルを。' })
    duix.speak({ content: '世界上独一无二的服装定制。' })
  }
}

const talkTwo = () => {
  duix.setVideoMuted(false)
  if(!speakTwo.value) {
    speakTwo.value = true
    // duix.speak({ content: 'はい。藤犬はオーダーメイドの概念をテクノロジーで刷新。シート新たなオーダーメイドアパレルの時代へ導く。' })
    duix.speak({ content: '优你科技重新颠覆服装个性化定制概念，引领全新服装定制新时代。' })
  }
}

const talkThree = () => {
  duix.setVideoMuted(false)
  if(!speakThree.value) {
    speakThree.value = true
    // duix.speak({ content: 'お客様が思い描いているイメージを的確に形にするために、フジユニが独自に開発したスリーディースキャナーでボディデータを正確に取得し、お客様のサイズと寸分狂いのないアバターを素早く確立します。' })
    duix.speak({ content: 'UNI科技自主研发3D人体高清彩色成像扫描仪，搭配超写实数字人技术引擎核心黑科技，快速重建一比一真实数字人。' })
  }
}

const talkFour = () => {
  duix.setVideoMuted(false)
  if(!speakFour.value) {
    speakFour.value = true
    // duix.speak({ content: '納得いくまでアバター上で自由にご試着いただき、お客様オリジナルの製品を生み出していただきます。お客様のデータはクラウドに送信され、パターンや木型を全自動で製作。それをもとに熟練の職人がデザインから測定値まで全てを正確に再現します。' })
    duix.speak({ content: '通过UNI个性化定制平台，可在虚拟形象上自由试穿，创造个人原创产品。所有的定制数据将被传输至云端，结合自动排料、自动裁床技术和智能数字放码技术，品牌设计师将根据定制数据精确制作产品,' })
  }
}
const talkFive = () => {
  duix.setVideoMuted(false)
  if(!speakFive.value) {
    speakFive.value = true
    // duix.speak({ content: 'お客様に最高品質のカスタマイズサービスを提供することで、フジユニがオーダーメイドアパレルの概念を変える。' })
    duix.speak({ content: '优你科技为客户提供最优质的定制服务，优你科技改变服装定制的概念。' })
  }
}

const initSpeak = () => {
  speakOne.value = false
  speakTwo.value = false
  speakThree.value = false
  speakThree.value = false
  speakFive.value = false
}


// 播放视频几数
const countPlay = () => {
  countPlays.value ++
  if(isKeyWordType.value && countPlays.value === 1) {
    intoVideoType.value = ""
    isKeyWord.value = false
    isKeyWordType.value = false
    speakCount.value = 0
    speakCount.value = 3
    bgType.value = 'init'
    faceType.value = 'face'
    dialogueVideoRef.value.clearListener()
    dialogueVideoRef.value?.pause()
    dialogueVideoRef.value?.pauseAudio()
    duix.setVideoMuted(false)
    checkFace("video")
  }
  if(countPlays.value === 3) {
    bgType.value = 'init'
    dialogueVideoRef.value.clearListener()
    dialogueVideoRef.value?.pause()
    dialogueVideoRef.value?.pauseAudio()
    duix.setVideoMuted(false)
    clearChatElement()
    // duix.speak({ content: '您好！我是UNI数智量体师小U，诚邀先生您 体验UNI数字化3D测量定制高定服务' })
    // duix.speak({ content: '先生您之前是否有体验过我们的数智量体呢？ 我可以向您介绍及开启数智量体服务。' })
    // setTimeout(() => {
    //   cameraRef.value.detectFaces()
    // },20000)
    checkFace("video")
  }
}

// 获取头像
const getAvatar = (url) => {
  if(url === 'notFace') {
    clearInterval(delayCheckTimer.value)
    faceType.value = "notFace"
    clearChatElement()
    speakCount.value = 0
    duix.speak({ content: '欢迎了解UNI数字化3D测量定制高定服务,我是UNI数智量体师小U' })
    duix.speak({ content: '独特比完美更有魅力是UNI企业追求的核心价值理念，将科技和工艺，个性和品格相结合，让每个人做自己的设计师，让世界拥有多元于开放INSOIRED BY THE PAST,LOOKING BEYOND TOMORROW.' })
    if(!duix.isInit) {
      initDuix()
    }
  } else {
    clearInterval(delayCheckTimer.value)
    faceType.value = "face"
    avatar.value = url
    // speakCount.value = 0
    if(countPlays.value !== 0) {
      duix.setVideoMuted(false)
      speakCount.value = 0
      duix.speak({ content: '您好！我是UNI数智量体师小U，诚邀先生您 体验UNI数字化3D测量定制高定服务' })
      duix.speak({ content: '先生您之前是否有体验过我们的数智量体呢？ 我可以向您介绍及开启数智量体服务。' })
      clearChatElement()
    } else {
      if(!duix.isInit) {
        initDuix()
      }
    }
  }
}

const getCamera = (val) => {
  isHasCamera.value = val
}

// 确认重启duxi
const confirmInit = () => {
  if (duix) {
    duix.stop()
    speakCount.value = 0
  }
  setTimeout(() => {
    initDuix()
  }, 800)
}

// 初始化duxi
const initDuix = async () => {
  try {
    duixOn()
    duix.init({
      sign: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6IjEyNTU5MjkyMzQ3MTU3MDk0NDAiLCJpYXQiOjE3MjEzNTIxNjIsImV4cCI6MTcyMTQzODU2Mn0.kZJnhMIfo6STAHTGJw8yDNiTEjiEj954hjGaTsQHTjU",
      containerLable: ".container"
    })
    console.log("duix",duix)
    console.log("麦克风权限成功")
  } catch (error) {
    console.error("麦克风权限获取失败", error)
  }
  // insertToSpeechChatLoadingBlock()
}
// 插入提示块
const insertToChatTipsBlock = (val = "") => {
  const newElement = document.createElement("div")
  newElement.className = "handler-block flex"
  newElement.innerHTML = (`
         <div class="btn-item">怎么称呼您?</div>
        <div class="btn-item">想了解数智量体</div>
  `)
  chatBlockRef.value.appendChild(newElement)
}

// 插入动态语音录入框录音中...
const insertToSpeechChatBlock = () => {
  clearSpeechChatBlockLoading()
  clearSpeechChatBlock()
  const newElement = document.createElement("div")
  newElement.className = "user-text-block flex-center fade-element"
  newElement.id = "speech"
  newElement.innerHTML = `
        <div class="left">
          <img class="bubble" src="${bubbleImg}" alt="" />
          <img class="interior-img" src="${bubbleImgLoading}" alt="" />
        </div>
        <div class="avatar-img">
          <img src="${avatarImg}" alt=""/>
        </div>
  `
  chatBlockRef.value.appendChild(newElement)
  scrollBottom()
}


// 插入动态语音录入框
const insertToSpeechChatLoadingBlock = () => {
  clearSpeechChatBlockLoading()
  const newElement = document.createElement("div")
  newElement.className = "user-text-block flex-center fade-element"
  newElement.id = "speechLoading"
  newElement.innerHTML = `
        <div class="left">
          <img class="bubble" src="${bubbleImg}" alt="" />
          <img class="interior-img" src="${userMsgImg}" alt="" />
        </div>
        <div class="avatar-img">
          <img src="${avatarImg}" alt=""/>
        </div>
  `
  chatBlockRef.value.appendChild(newElement)
  scrollBottom()
}

// 插入AI回答模块
const insertToChatBlockForAnswer = (val = "") => {
  const newElement = document.createElement("div")
  newElement.className = "chat-text-block fade-element"
  newElement.innerHTML = val
  chatBlockRef.value.appendChild(newElement)
  scrollBottom()
  clearSpeechChatBlock()
}

// 插入问题
const insertToChatBlockForQuestion = (val = "") => {
  const newElement = document.createElement("div")
  newElement.className = "user-text-block flex-center fade-element"
  newElement.innerHTML = `
          <div class="left-statement">
          ${val}
        </div>
        <div class="avatar-img">
          <img src="${avatarImg}" alt=""/>
        </div>
  `
  chatBlockRef.value.appendChild(newElement)
  scrollBottom()
  clearSpeechChatBlock()
}

// 清除语音动态录入框
const clearSpeechChatBlock = () => {
  const speechBlock = document.getElementById("speech")
  if (speechBlock !== null) {
    chatBlockRef.value.removeChild(speechBlock)
  }
}

// 清除语音动态录入框
const clearSpeechChatBlockLoading = () => {
  const speechBlock = document.getElementById("speechLoading")
  if (speechBlock !== null) {
    chatBlockRef.value.removeChild(speechBlock)
  }
}

// 滚动到底部
const scrollBottom = () => {
  chatBlockRef.value.scrollTo({
    top: chatBlockRef.value.scrollHeight,
    behavior: "smooth"
  })
}

const clearChatElement = () => {
  chatBlockRef.value.innerHTML = ""
}

const searchBtn = () => {
  aiAnswer(searchValue.value)
}

/**
 * question 问题文本  interrupt 是否打断之前说的话
 * userId 业务层用户唯一id，开启记忆功能时使用，用来关联用户历史记录. 如果为空，默认使用appId
 * isVector 决策是否带入之前的相似回答
 */

const aiAnswer = (value, interrupt = false) => {
  duix.answer({ question: value, interrupt: interrupt }).then((res) => {
    console.log(res, "aiAnswer")
  })
}

const getDuxiToken = async () => {
  let params = {
    // appId: "1256578073768366080",
    // appSecret: "530a9834-673a-4baa-a326-05d3a93a80a2",
    appId: "1255929234715709440",
    appSecret: "f0f193ff-c494-4fa6-8851-29d12979fd56",
  }
  const res = await ApiPublic.getDuxiToken(params)
  console.log("res", res)
}

const stream = ref(null)

const duixOn = () => {
  duix.setVideoMuted(false)
  duix.on("error", (error) => {
    console.log("错误信息", error)
    tipsMessage.value = error.data.message
    // isShowTips.value = true
  })
  console.log(duix, "duix")
  duix.on("intialSucccess", () => {
    // 开始会话
    duix
      .start({
        conversationId: "1808048017611415553",
        openAsr: true, //实时识别
        muted: false, //是否静音
        wipeGreen: true //扣绿幕
      })
      .then((res) => {
        console.log(res, "链接完成")
      })
  })
  duix.on("bye", (data) => {
    console.info("bye", data)
  })
  duix.on("progress", (progress) => {
    console.info("progress进度", progress)
  })
  duix.on("show", () => {
    isLoadingHuman.value = false
    console.info("show")
    // 此时可确认视频已
    // document.querySelector("#modal").style.display = "none"
  })
  duix.on("openAsrSuccess", () => {
    speakCount.value = 0
    if(faceType.value === 'face') {
      duix.speak({ content: '您好！我是UNI数智量体师小U，诚邀先生您 体验UNI数字化3D测量定制高定服务' })
      duix.speak({ content: '先生您之前是否有体验过我们的数智量体呢？ 我可以向您介绍及开启数智量体服务。' })
    } else {
      duix.speak({ content: '欢迎了解UNI数字化3D测量定制高定服务,我是UNI数智量体师小U' })
      duix.speak({ content: '独特比完美更有魅力是UNI企业追求的核心价值理念，将科技和工艺，个性和品格相结合，让每个人做自己的设计师，让世界拥有多元于开放INSOIRED BY THE PAST,LOOKING BEYOND TOMORROW.' })
    }

    console.info("加载完成openAsrSuccess;加载完成openAsrSuccess;加载完成openAsrSuccess")
  })
  duix.on("asrClose", () => {
    console.info("asrClose")
  })
  duix.on("speakStart", (data) => {
    clearTimeout(notSpeakTime.value)
    console.info("AISpeakStart;AISpeakStart;AISpeakStart开始说话", data)
    if(speakCount.value >= 2 && data.content.indexOf("数智量体") !== -1) {
      console.log("读到关键词")
      setTimeout(() =>{
        clearInterval(delayCheckTimer.value)
        clearTimeout(notSpeakTime.value)
        intoVideoType.value = "into"
        isKeyWord.value = true
        isKeyWordType.value = true
        duix.break()
        faceType.value = 'notFace'
        bgType.value = "videoBg"
        countPlays.value = 0
        initSpeak()
        dialogueVideoRef.value?.play()
        dialogueVideoRef.value?.playAudio()
        duix.setVideoMuted(true)
      },800)
    }
  })
  duix.on("speakEnd", (data) => {
    console.info("speakEnd说话结束", data)
    speakCount.value++
    if(!isKeyWord.value) {
      // 初始介绍
      if (speakCount.value === 2) {
        if(faceType.value === 'face') {
          setTimeout(() => {
            insertToChatTipsBlock()
          }, 1000)
          // 经过多少秒 没人说话 跳转视频页面
          notSpeakTime.value = setTimeout(() => {
            checkFace()
          },30000)
        } else {
          setTimeout(() => {
            bgType.value = "videoBg"
            countPlays.value = 0
            // dialogueVideoRef.value?.initVideo()
            initSpeak()
            dialogueVideoRef.value?.play()
            dialogueVideoRef.value?.playAudio()
            duix.setVideoMuted(true)
          },5000)
        }
        setTimeout(() => {
          isSpeak.value = false
          // insertToSpeechChatBlock()
        }, 2000)
      }

      if (speakCount.value > 2) {
        if(faceType.value === 'face') {
          // clearTimeout(notSpeakTime.value)
          notSpeakTime.value = setTimeout(() => {
            console.log(2222)
            checkFace()
          },30000)
        }
        isSpeak.value = false
        // insertToSpeechChatBlock()
      }
      isKeyWord.value = false
      // insertToChatBlockForAnswer(data.content)
    }

  })
  duix.on("speakSection", (data) => {
    clearTimeout(notSpeakTime.value)
    console.info("speakSection", data)
    if(faceType.value === "notFace" && speakCount.value <= 2) {
      insertToChatBlockForAnswer(data.content)
    } else {
      insertToChatBlockForAnswer(data.content)
    }
  })
  duix.on("speakError", (data) => {
    console.info("speakError", data)
  })
  duix.on("asrResult", (data) => {
    clearTimeout(notSpeakTime.value)
    console.info("收到信息asrResult", data)
    clearSpeechChatBlockLoading()
    if (speakCount.value >= 2) {
      isSpeak.value = true
      // clearSpeechChatBlock()
      // insertToSpeechChatLoadingBlock()
      // setTimeout(() => {
      //   insertToChatBlockForQuestion(data)
      // }, 800)
      if(faceType.value === 'face') {
        aiAnswer(data, true)
      }
    }
  })
  duix.on("report", (data) => {
    // console.info('report', data)
  })
}

const checkFace = (type) => {
  if(type === "speak") {
    faceType.value = "notFace"
    bgType.value = "videoBg"
    countPlays.value = 0
    duix.setVideoMuted(true)
  }
  delayCheckTimer.value = setInterval(() => {
    cameraRef.value.detectFaces("delayCheck")
  },8000)
}

// 开始语音识别
const speechRecognition = ref(null)
const audio = ref(null)
const startSpeech = () => {
  navigator.mediaDevices
    .getUserMedia({ audio: true })
    .then((stream) => {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      speechRecognition.value = new SpeechRecognition()

      speechRecognition.value.onresult = function (event) {
        const result = event.results[0][0].transcript
        console.log("你说了：", result)
      }

      speechRecognition.value.start()
    })
    .catch((error) => console.error("无法访问麦克风", error))
}
// 提供响应式的值
const count = ref(0)
</script>
<style lang="scss">
.loading-human {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .loading-video{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .logo-block {
    position: absolute;
    padding: 100px;
  }
  .logo-block .title-1 {
    margin-left: 35px;
  }
  .loading-text {
    font-family: MiSans;
    position: absolute;
    bottom: 168px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    text-align: center;

    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    background: linear-gradient(270deg, #009DFF 0%, #556BF9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}
.dialogue {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .logo-block {
    padding: 100px;
  }
  .logo-block .title-1 {
    margin-left: 35px;
  }
  .voice-block {
    position: absolute;
    right: 90px;
    top: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 528px;
    height: 374px;
    box-shadow: inset 3px 2px 6px 0 #ffffff;
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 28px;
    padding: 12px 3px;
  }
  .voice-block .voice-children {
    width: 500px;
    height: 350px;
    .example-img {
      width: 500px;
      height: 350px;
    }
  }
  .voice-block .voice-icon {
    position: absolute;
    bottom: -56px;
    width: 112px;
    height: 112px;
  }
}

.init-bg {
  background: url("@/assets/images/dialogue/dialogue.png") no-repeat fixed center;
  background-size: cover;
}
.video-bg {
  //background: url("@/assets/images/dialogue/dialogue-2.jpg") no-repeat fixed center;
  background: url("@/assets/images/dialogue/dialogue-video-1.jpg") no-repeat fixed center;
  background-size: cover;
}

.chat-message-block {
  position: absolute;
  right: 90px;
  bottom: 50%;
  transform: translateY(50%);
}
.container-pos-top {
  z-index: 9;
  top: 1200px;
}
.chat-block {
  //display: flex;
  //align-items: center;
  //flex-direction: column;
  width: 1150px;
  height: 1200px;
  overflow: scroll;
  z-index: 8;
  font-size: 48px;
  line-height: 72px;
  color: #0e3860;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background-color: rgba(240, 240, 240, 1);
  }
  .chat-text-block {
    max-width: 1000px;
    padding: 64px 82px;
    box-shadow: inset 3px 2px 6px 0 #ffffff;
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 36px;
    margin: 0 auto 40px;
  }
  .handler-block {
    margin-left: 70px;
    .btn-item {
      border-radius: 36px;
      padding: 32px 48px;
      background: #0e3860;
      color: #fff;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      line-height: 72px;
      margin-right: 20px;
      font-size: 36px;
      margin-bottom: 40px;
    }
  }
}
.user-text-block {
  //margin-top: 60px;
  justify-content: right;
  margin-bottom: 40px;
  .left {
    position: relative;
    margin-right: 36px;
  }
  .left-statement {
    max-width: 1095px;
    padding: 64px 82px;
    margin-right: 36px;
    border-radius: 36px;
    color: #fff;
    font-size: 48px;
    line-height: 72px;
    background: linear-gradient(180deg, rgba(6, 2, 255, 0.5) 0%, rgba(12, 223, 255, 0.5) 100%);
  }
  .left .bubble {
    width: 445px;
    height: 164px;
  }
  .left .interior-img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-40%);
    width: 416px;
    height: 164px;
  }
  .avatar-img {
    width: 212px;
    height: 212px;
    border-radius: 50%;
    //border: 6px solid rgba(255, 255, 255, 0.5);
    .img-url {
      width: 212px;
      height: 212px;
      border-radius: 50%;
    }
  }
}
.input-cont {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
.container {
  position: absolute;
  transform: translateX(50%);
  transition: left 0.5s ease-in-out;
  bottom: -300px;
  width: 70vw;
  height: 70vh;
  margin: auto;
  scale: 1.2;
}
.container-pos-70 {
  left: -70%;
  transition: left .8s ease-in-out;
}
.container-pos-center {
  left: 50%;
  transform: translateX(-60%);
  transition: left .8s ease-out;
}
.container-pos-right {
  left: 0;
  transition: left .8s ease-out;
}

.video-desc {
  position: absolute;
  top: 270px;
  left: -200px;
  width: 2800px;
  height: 1600px;
  scale: .8;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-element {
  animation: fade 0.8s ease-in-out 1;
}
</style>
